<template>
  <div class="take-order">
    <head-top v-if="personStatus === 1" head-title="师傅接单" hidden="true" OrderPublish="立即发布"
              @toOrder="$router.push('/OrderIssue')"></head-top>
    <head-top v-else head-title="师傅接单"></head-top>
    <div v-if="personStatus === 1 || personStatus === 2">
      <!--筛选部分-->
      <div class="screen">
        <span>内容筛选</span>
        <div class="screen-type" @click="selectType">
          <span>类型：</span>
          <span>{{typeName}}</span>
        </div>
        <div class="screen-area" @click="selectArea">
          <span>区域：</span>
          <span>{{areaName}}</span>
        </div>
      </div>
      <!--类型弹窗-->
      <div class="screen-popup">
        <mt-popup
          v-model="showType"
          :closeOnClickModal="popupBoolen"
          popup-transition="popup-fade">
          <div class="type-main">
            <div class="popup_close">
              <p @click="closeTypePopup">X</p>
            </div>
            <!--<div class="classfiy">
              <ul class="items clearfix">
                <li v-for="(item,index) in typeInfo" :key="index" class="item" @click="selecttype(item)">
          <span class="title" :class="{'active':item.active,'unactive':!item.active}">
          {{item.name}}
          </span>
                </li>
              </ul>
            </div>-->
            <div class="type-ul" v-for="(sort,sortindex) in typeInfo">
              <div class="ul-title">
                <span>▎</span>{{sort.name}}
              </div>
              <ul class="items clearfix">
                <li class="item-li" v-for="(item,index) in sort.child" :key="index"
                    :class="(activeClass[0]===sortindex && activeClass[1]===index) ? 'active' : ''"
                    @click="selecttype(item,sortindex,index)">
                  <span>{{item.c_name}}</span>
                </li>
              </ul>
            </div>
          </div>
        </mt-popup>
      </div>
      <!--区域弹窗-->
      <div class="area-popup">
        <mt-popup
          v-model="showArea"
          position="top"
          :closeOnClickModal="popupBoolen"
          popup-transition="popup-fade">
          <div class="area-main">
            <div class="popup_close">
              <p @click="closeAreaPopup">X</p>
            </div>
            <div class="area-sort clearfix">
              <ul>
                <li v-for="(item,index) in citys" :key="index" @click="selectStyle(item, item.id) "
                    :class="{'active':item.active,'unactive':!item.active}">
                  <h4 ref="title">{{item.title}}</h4>
                </li>
              </ul>
            </div>
            <div class="hot_city clearfix">
              <div class="hot_header">
                <span>热门城市</span>
              </div>
              <div class="hot_chose clearfix">
                <ul>
                  <li v-for="(item,index) in lists"
                      :key="index"
                      @click="getStreet(item.id,item)"
                      :class="{'active':item.active,'unactive':!item.active}"
                  >
                    <p>{{item.title}}</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </mt-popup>
      </div>
      <!--列表部分-->
      <div class="order-list">
        <ul>
          <li v-for="(order,n) in orderList" @click="$router.push('/OrderListDetail/'+order.id)">
            <div class="order_list_top">
              <div class="help_title">
                <img :src="order.avatar" alt="">
                <div class="help_msg">
                  <div class="msg_top">
                    <p>{{order.real_name}}</p>
                    <p>
                      <span ref="phone">{{order.phone}}</span>
                    </p>
                  </div>
                  <div class="msg_bottom">
                    <p>{{order.areas_name}}</p>
                    <p v-if="order.status === 1">可接单</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="order_list_centre">
              <h2>{{order.title}}</h2>
              <p>截止时间：{{order.end_at}}</p>
              <p>查验地址：{{order.address}}</p>
            </div>
            <div class="order_list_bottom">
              <button>{{order.name}}</button>
              <span>发布时间：{{order.created_at}}</span>
            </div>
          </li>
          <!--没有数据的时候显示暂无数据-->
          <li v-if="flag&&orderList.length === 0" class="no_data">
            <img src="../../assets/default.png" alt="" width="100" height="100">
            <p>抱歉！暂无数据</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="no_access" v-if="personStatus === 0">
      抱歉！您不是接单平台的员工，所以无权限
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import Footer from '../footer/Footer.vue'
  import { getCheckPublishCategory2 } from '../../api/jianli'
  import { getCity, getStreetData, getStreetDefault } from '../../api/cityVillage'
  import { takeOrderList } from '../../api/MyOrder'

  export default {
    name: 'TakeOrder',
    data () {
      return {
        popupBoolen: false, // 阻止点击遮罩层关闭弹窗
        showType: false,
        showArea: false,
        typeInfo: [], // 类型数据
        typeName: '小区电梯', // 存放选择类型的名字
        typeIdNum: 8, // 存放选择类型的id
        activeClass: [-1, -1], // 选择类型的样式
        citys: [], // 城市对应的地区
        lists: [], // 城市
        areaName: '下城区', // 地区名称
        areaIdNum: 202, // 存地区id
        personStatus: '', // 状态为1:可以发布可以查询列表  2：只查询列表  0:没有任何权限
        orderList: [], // 接单平台列表
        flag: false // 标识：没有数据的时候
      }
    },
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'OrderListDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        // this.orderList()
      }
      this.$route.meta.isBack = false
    },
    created () {
      this._getSelectType()
      this._getCityList()
      this._getStreetDefault()
      // 当没有选择类型和区域的时候默认显示下城区（id:202）,小区电梯类型（id:1）
      if (this.typeIdNum === 8 && this.areaIdNum === 202) {
        takeOrderList(this.areaIdNum, this.typeIdNum).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.personStatus = res.data.status
            // reverse:颠倒数组元素的顺序
            this.orderList = res.data.data.reverse()
            this.flag = true
          }
        })
      }
      // this._takeOrderList()
    },
    methods: {
      // 选择类型弹窗显示
      selectType () {
        this.showType = !this.showType
      },
      // 关闭类型弹窗
      closeTypePopup () {
        this.showType = false
      },
      // 选择地区弹窗显示
      selectArea () {
        this.showArea = !this.showArea
      },
      // 关闭地区弹窗
      closeAreaPopup () {
        this.showArea = false
      },
      // 类型数据
      _getSelectType () {
        getCheckPublishCategory2().then(res => {
          if (res.code === 200) {
            this.typeInfo = res.data
            // console.log(this.typeInfo)
          }
        })
      },
      // 选择类型
      selecttype (item, sIndex, index) {
        // console.log(item)
        this.typeName = item.c_name
        this.typeIdNum = item.c_type_id
        this.activeClass = [sIndex, index]
        takeOrderList(this.areaIdNum, this.typeIdNum).then(res => {
          if (res.code === 200) {
            this.personStatus = res.data.status
            this.orderList = res.data.data
          }
        })
        this.showType = false
      },
      // 获取城市
      _getCityList () {
        getCity().then(res => {
          if (res.code === 200) {
            this.lists = res.data
            // console.log(this.lists)
          }
        })
      },
      // 根据城市获取各个区域
      getStreet (itemId, item) {
        getStreetData(itemId).then(res => {
          if (res.code === 200) {
            this.citys = res.data
          }
        })
        setTimeout(() => {
          this.lists.forEach((item, index) => {
            this.$set(item, 'active', false)
          })
          this.$set(item, 'active', true)
          // this.cityId = item.id
          // this.title = item.title
        }, 20)
      },
      // 默认区域
      _getStreetDefault () {
        getStreetDefault().then(res => {
          this.citys = res.data
        })
      },
      // 选择区域
      selectStyle (item) {
        setTimeout(() => {
          this.citys.forEach(item => {
            this.$set(item, 'active', false)
          })
          this.$set(item, 'active', true)
        }, 20)
        // console.log(item)
        this.areaName = item.title
        // console.log(item.id)
        this.areaIdNum = item.id
        // 获取列表
        takeOrderList(this.areaIdNum, this.typeIdNum).then(res => {
          if (res.code === 200) {
            this.personStatus = res.data.status
            this.orderList = res.data.data
            console.log(this.orderList)
          }
        })
        this.showArea = false
      }
    },
    components: {
      headTop,
      'v-footer': Footer
    }
  }
</script>

<style lang="scss" scoped>
  .take-order {
    padding-top: 50px;
    padding-bottom: 60px;
    position: relative;
    .screen {
      width: 100%;
      height: 50px;
      position: fixed;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      top: 90px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #d9d9d9;
      z-index: 10;
      background: #ffffff;
      span {
        color: #292929;
        font-size: 15px;
        padding-left: 10px;
      }
      .screen-type {
        span:first-child {
          color: #666666;
        }
        span:last-child {
          color: #2585d0;
        }
      }
      .screen-area {
        padding-right: 10px;
        span:first-child {
          color: #666666;
        }
        span:last-child {
          color: #2585d0;
        }
      }
    }
    /*类型弹窗*/
    .screen-popup {
      .mint-popup-top {
        top: 141px;
      }
      .mint-popup {
        width: 100%;
        height: 90%;
        overflow: scroll;
        .type-main {
          .popup_close {
            height: 40px;
            border-bottom: 1px solid #d9d9d9;
            p {
              font-size: 18px;
              padding: 10px 20px 10px 20px;
              color: #888888;
            }
          }
          .type-ul {
            border-bottom: 5px solid #f2f2f2;
            padding-bottom: 5px;
            .ul-title {
              padding: 20px 0;
              font-size: 15px;
              display: -webkit-box;
              display: -moz-box;
              display: -webkit-flex;
              display: -moz-flex;
              display: -ms-flexbox;
              display: flex;
              align-items: center;
              span {
                font-size: 20px;
                color: #2585d0;
              }
            }
            .items {
              .item-li {
                width: 86.25px;
                height: 32px;
                float: left;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                border: 1px solid #d9d9d9;
                margin-left: 6px;
                text-align: center;
                margin-top: 5px;
                border-radius: 5px;
                span {
                  font-size: 14px;
                  line-height: 32px;
                  color: #292929;
                }
              }
              .active {
                border: 1px solid #0078de;
                span {
                  color: #0078de;
                }
              }
            }
          }
        }
      }
    }
    /*区域弹窗*/
    .area-popup {
      .mint-popup-top {
        top: 141px;
      }
      .mint-popup {
        width: 100%;
        .area-main {
          .popup_close {
            height: 40px;
            border-bottom: 1px solid #d9d9d9;
            p {
              font-size: 18px;
              padding: 10px 20px 10px 20px;
              color: #888888;
            }
          }
          .area-sort {
            margin: 0 10px;
            padding-bottom: 10px;
            height: 150px;
            ul {
              li {
                float: left;
                margin-top: 10px;
                margin-right: 5px;
                text-align: center;
                padding: 0 10px;
                h4 {
                  font-size: 13px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
            }
          }
          .active {
            color: #0078de;
            border: 1px solid #0078de;
            border-radius: 5px;
          }
          .unactive {
            color: #292929;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
          }
          .hot_city {
            width: 100%;
            .hot_header {
              width: 100%;
              height: 44px;
              border-bottom: 1px solid #d7d7d7;
              span {
                font-size: 15px;
                line-height: 44px;
                margin-left: 10px;
              }
            }
            .hot_chose {
              padding: 10px;
              ul {
                li {
                  height: 36px;
                  float: left;
                  margin-right: 10px;
                  text-align: center;
                  border-radius: 5px;
                  margin-bottom: 5px;
                  p {
                    line-height: 36px;
                    font-size: 13px;
                    padding-left: 20px;
                    padding-right: 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
    /*内容列表*/
    .order-list {
      padding-top: 50px;
      ul {
        li {
          padding: 10px;
          border-bottom: 10px solid #f2f2f2;
          .order_list_top {
            .help_title {
              height: 65px;
              border-bottom: 1px solid #d9d9d9;
              img {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                float: left;
                margin-top: 10px;
              }
              .help_msg {
                float: right;
                width: 83%;
                height: 65px;
                .msg_top {
                  width: 100%;
                  height: 33px;
                  p:first-child {
                    float: left;
                    font-size: 15px;
                    color: #292929;
                    line-height: 33px;
                  }
                  p:last-child {
                    float: right;
                    span {
                      font-size: 13px;
                      line-height: 33px;
                      color: #2585d0;
                    }
                  }
                }
                .msg_bottom {
                  width: 100%;
                  height: 32px;
                  clear: both;
                  display: -webkit-box;
                  display: -moz-box;
                  display: -ms-flexbox;
                  display: -webkit-flex;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  p {
                    /*float: left;*/
                    line-height: 24px;
                    font-size: 13px;
                    color: #999999;
                  }
                  P:last-child {
                    color: #2585d0;
                  }
                }
              }
            }
          }
          .order_list_centre {
            border-bottom: 1px solid #d9d9d9;
            padding-bottom: 10px;
            h2 {
              font-weight: normal;
              font-size: 15px;
              color: #292929;
              padding-top: 10px;
            }
            p {
              font-size: 14px;
              color: #666666;
              padding-top: 10px;
            }
          }
          .order_list_bottom {
            margin-top: 10px;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: space-between;
            button {
              padding: 5px;
              background: #ffffff;
              border: 1px solid #2585d0;
              color: #2585d0;
            }
            span {
              font-size: 14px;
              color: #999999;
            }
          }
        }
        li:last-child {
          border-bottom: none;
        }
        .no_data {
          /*width: 100%;*/
          text-align: center;
          color: #0b7ad9;
          font-size: 14px;
          img {
            padding-top: 20px;
          }
          p {
            margin-top: 5px;
          }
        }
      }
    }
    /*无权限*/
    .no_access {
      height: 400px;
      font-size: 16px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      justify-content: center;
    }
  }
</style>
